<template>
  <div class="event">
    <div class="ww">
      <HpHeader />
      <div class="content">
        <div class="title">
          <p>我的动态({{ userInfo.evens }})</p>
        </div>
      </div>
      <div class="c-content">
        <div class="c-music">
          <h3><img src="./images/music.png">暂时还没有动态哦~</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HpHeader from '@/components/HomepageHeader'
export default {
  components: { HpHeader },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    }
  }
}
</script>

<style lang="less" scoped>
.event {
  .ww {
    background-color: #fff;

    .content {
      margin: 40px;

      .title {
        height: 33px;
        padding-bottom: 5px;
        border-bottom: 2px solid #C10D0C;

        p {
          font-size: 20px;
          font-weight: normal;
          min-width: 60px;
          line-height: 28px;
          color: #333;
        }
      }

      .c-content {
        line-height: 300px;
        text-align: center;
        font-size: 28px;

        i {
          display: inline-block;
          margin-right: 17px;
          width: 64px;
          height: 50px;
          vertical-align: middle;
          background: url(../../../assets/images/icon.png) no-repeat 0 -347px;
        }
      }
    }

    .c-content {
      width: 900px;
      margin: 0 auto;

      .c-music {
        width: 900px;
        height: 500px;
        text-align: center;
        line-height: 100px;
        position: relative;

        h3 {
          position: relative;
          font-size: 18px;
          font-weight: normal;

          img {
            position: absolute;
            width: 64px;
            left: 300px;
            top: 20px;
          }
        }
      }
    }
  }
}
</style>